<template>
  <div>
    <!-- 顶部工单编号 -->
    <div class="Top">
      <el-form
        label-width="90px"
        :model="PropsData.formLabelAlign"
        :fit="true"
      >
        <div class="Tops">
          <el-form-item :label="$route.meta.title">
            <el-input
              v-model.trim="PropsData.Order.taskCode"
              @input="$emit('InputFn')"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$route.meta.titleTwo" v-if="$route.meta.titleTwo">
            <el-select v-model="PropsData.Order.status" placeholder="请选择">
              <el-option
                v-for="(item, index) in PropsData.DropDown"
                :key="index"
                :label="item.statusName"
                :value="item.statusId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label-width="10px" color="#5f84ff">
            <el-button
              type="primary"
              icon="el-icon-search"
              @click.native="$emit('QueryFn')"
              >查询</el-button
            >
          </el-form-item>
        </div>
      </el-form>
    </div>
    <!-- 表格内容 -->
    <div class="Box">
      <div class="ButtonBox">
        <el-button
          type="primary"
          icon="el-icon-circle-plus-outline"
          @click.native="$emit('OpenDiaFn', '1')"
          size="medium"
          class="xj"
          >新建</el-button
        >
        <el-button
          type="primary"
          size="small"
          class="gdpz"
          @click="$emit('configurationFn')"
          v-if="$route.meta.rightBtn"
          >工单配置</el-button
        >
      </div>
      <!-- table表格 -->
      <div>
        <el-table
          :data="PropsData.data"
          style="width: 100%;"
          :header-cell-style="headerStyleEvent"
        >
          <div class="TableItem">
            <el-table-column label="操作" prop="caozuo" align="left" width="251px">
              <template #default="scope">
                <div class="BtnStyle">
                  <span @click="$emit('CheckDetailsFn', scope.row, '4')" v-if="$route.meta.table.btn > 3">
                  <el-link type="primary" :underline="false">重置密码</el-link>
                </span>
                <span @click="$emit('CheckDetailsFn', scope.row, '1')" v-if="$route.meta.table.btn >= 1">
                  <el-link type="primary" :underline="false">查看详情</el-link>
                </span>
                <span @click="$emit('CheckDetailsFn', scope.row, '2')" v-if="$route.meta.table.btn > 1">
                  <el-link type="primary" :underline="false">修改</el-link>
                </span>
                <span @click="$emit('CheckDetailsFn', scope.row, '3')" v-if="$route.meta.table.btn > 2">
                  <el-link type="danger" :underline="false">删除</el-link>
                </span>
              </div>
              </template>
            </el-table-column>
            <el-table-column
              style="padding-left: 20px"
              width="70px"
              label="序号"
              prop="number"
              align="left"
            >
            </el-table-column>
            <el-table-column :label="$route.meta.table.name" prop="taskCode" v-if="$route.meta.table.name" align="left">
            </el-table-column>
            <el-table-column :label="$route.meta.table.one" prop="innerCode" v-if="$route.meta.table.one" align="left">
            </el-table-column>
            <el-table-column :label="$route.meta.table.two" prop="taskType.typeName" v-if="$route.meta.table.two" align="left">
            </el-table-column>
            <el-table-column :label="$route.meta.table.three"  prop="createType" v-if="$route.meta.table.three" align="left">
              <template #default="scope" v-if="$route.meta.table.toggle">
                <div >
                  {{ PropsData.RepairOrder[+scope.row.createType] || "暂无" }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              :label="$route.meta.table.four"
              prop="taskStatusTypeEntity.statusName"
              v-if="$route.meta.table.four"
              align="left"
            >
            </el-table-column>
            <el-table-column :label="$route.meta.table.five" prop="userName" v-if="$route.meta.table.five" align="left">
            </el-table-column>
            <el-table-column :label="$route.meta.table.six" v-if="$route.meta.table.six" align="left">
              <template #default="scope">
                <span>{{ Timer(scope.row.createTime) }}</span>
              </template>
            </el-table-column>
          </div>
        </el-table>
      </div>
      <div class="Bottom">
        <div class="text">
          共{{ PropsData.TotalPages.totalCount }}条记录 第 {{ PropsData.num }}/{{PropsData.TotalPages.totalPage}}页
        </div>
        <div class="Btn">
          <el-button
            type="primary"
            :disabled="PropsData.OnClick"
            ref="OneBtn"
            @click.native="$emit('OneBtn')"
            >上一页</el-button
          >
          <el-button type="primary" ref="TwoBtn" :disabled="PropsData.TwClick" @click.native="$emit('TwoBtn')"
            >下一页</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
// VUEX模块化使用辅助函数
import { createNamespacedHelpers } from 'vuex'
const { mapState } = createNamespacedHelpers('publics')
export default {
  data () {
    return {
    }
  },
  created () {
    console.log(this.PropsData)
  },
  methods: {
    // 表格头回调函数
    headerStyleEvent () {
      return 'background-color:#f3f6fb'
    },
    // 转换时间格式
    Timer (val) {
      return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  computed: {
    ...mapState(['PropsData'])
  },
  watch: {
    // 上一页
    'PropsData.TotalPages.totalPage': {
      immediate: true,
      deep: true,
      handler (news, olds) {
        if (this.PropsData.num === 1) {
          this.PropsData.OnClick = true
          setTimeout(() => {
            this.$refs.OneBtn.$el.style.opacity = '0.4'
          })
        } else {
          this.PropsData.OnClick = false
          setTimeout(() => {
            this.$refs.OneBtn.$el.style.opacity = ''
          })
        }
        if (this.PropsData.num === Number(this.PropsData.TotalPages.totalPage) || news === '0') {
          this.PropsData.TwClick = true
          setTimeout(() => {
            this.$refs.TwoBtn.$el.style.opacity = '0.4'
          })
        } else {
          this.PropsData.TwClick = false
          setTimeout(() => {
            this.$refs.TwoBtn.$el.style.opacity = ''
          })
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.Top {
  padding: 20px;
  line-height: 40px;
  height: 40px;
  background-color: #fff;
  .Tops {
    display: flex;
    /deep/ .el-button--primary {
      background-color: #5f84ff;
      font-size: 16px;
    }
  }
}
.TableItem {
  background-color: pink;
  z-index: 999;

}
.Box {
  background-color: #fff;
  margin-top: 20px;
  padding: 20px;
  text-align: left;
  .ButtonBox {
    margin-bottom: 10px;
    .xj {
      border: #fff;
      background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
    }
    .gdpz {
      border: #fff;
      background-color: #fbf4f0;
      color: #333;
    }
  }
  .Bottom {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-top: 35px;
    .text {
      color: #999;
    }
    .Btn {
      margin-right: 50px;
      zoom: 80%;
      .el-button {
        margin-left: 50px;
        background-color: #d5ddf8;
        border: #fff;
        color: #333;
      }
    }
  }
}
.BtnStyle{
    display:flex;
    justify-content: space-evenly
  }
</style>
